<!-- 企业微信素材显示组件 -->
<template>
    <div>
        <div v-if="material.type === 'TEXT'" style="font-size: 10px">
            <table-popover :text="material.content" :length="36"></table-popover>
        </div>
        <div v-if="material.type === 'DOCUMENT'">
            <el-image class="show" :src="require('@/assets/images/pdf.png')" fit="contain" v-if="isPdf"></el-image>
            <el-image class="show" :src="require('@/assets/images/word.png')" fit="contain" v-if="isWord"></el-image>
        </div>
        <div v-if="material.type === 'IMAGE'">
            <el-image class="show" :src="material.fileUrl" fit="contain" :preview-src-list="previewSrcList">
            </el-image>
        </div>
        <div v-if="material.type === 'H5'">
            <el-image class="show" :src="material.h5ImgUrl" fit="contain" :preview-src-list="previewSrcList">
            </el-image>
        </div>
        <div v-if="material.type === 'MNP'">
            <el-image class="show" :src="material.mnpImgUrl" fit="contain" :preview-src-list="previewSrcList">
            </el-image>
        </div>
        <div v-if="material.type === 'VIDEO'">
            <video class="show" :src="material.fileUrl" controls width="100%"></video>
        </div>
    </div>
</template>

<script>
import TablePopover from "@/component/single/TablePopover";

export default {
    name: "material-show",
    components: {TablePopover},
    data() {
        return {
            material: {},
            isPdf: false,
            isWord: false,
            isExcel: false,
            isPpt: false,
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        info: {
            type: Object,
            default: () => {
            },
        },
        previewSrcList: {
            type: Array,
            default: () => [],
        }
    },
    watch: {
        info: {
            handler(newValue, oldValue) {
                this.material = newValue;
                this.init();
            },
            deep: true
        },
    },
    methods: {
        init() {
            if (this.info) {
                this.material = this.info;
                if (this.material && this.material.type === 'DOCUMENT') {
                    if (this.material.fileUrl.indexOf('.pdf') !== -1) {
                        this.isPdf = true;
                    }
                    if (this.material.fileUrl.indexOf('.docx') !== -1 || this.material.fileUrl.indexOf('.doc') !== -1) {
                        this.isWord = true;
                    }
                }
            }
        }
    },
    created() {
        this.init();
    },
}
</script>

<style scoped>
.show {
    width: 100px;
    height: 100px;
}
</style>
